{include file="index/_meta" /}
    <title>订单详情</title>
<style>

    .van-pull-refresh{
        padding: 10px;
    }
    .van-pull-refresh__track{
        text-align: center;
    }
    .list .van-cell-group{
        border-radius: 15px;
        overflow: hidden;
    }
    /*二维码*/

    .ewm {
        position: relative;
    }

    .ewm_p {
        line-height: 1;
        margin: 0 auto;
        /*margin-top: 0.58rem;*/
        width: 100%;
        background: white;
        box-shadow: 0px 4px 10px 0px rgba(232, 232, 232, 1)
    }

    .ewm_p .title {
        padding:1rem 0.44rem;
        background: #00666A;
        height: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .ewm_p .title span{
        font-size: 0.34rem;
    }
    .j_f{
        justify-content: flex-start !important;

    }
    .j_f span{
        margin-right: 0.4rem;
    }
    .ewm_nr {
        text-align: center;
    }

    .ewm_nr>p {
        font-weight: bold;
        padding-top: 0.36rem;
        padding-bottom: .3rem;
    }

    .ewm_nr>img {
        margin: 0 auto;
        margin-bottom: .36rem;
    }

    .xian p:nth-child(1) {
        width: 100px;
        height: 50px;
        background-color: #cb18f8;
        border-radius: 50px 50px 0 0;
        /* 左上、右上、右下、左下 */
    }

    .ewm_user p {
        padding-left: 1.4rem;
        margin-bottom: .4rem;
        display: flex;
    }

    .ewm_user p span {
        color: #A5A5A5;
        margin-right: .4rem;
    }

    .ewm_user p em {
        color: #343434;
        display: inline-block;
    }

    .xian {
        height: 0.64rem;
        background: url('/static/wechat/img/user/piao_xian.png');
        background-size: 120% 100%;
        background-position-x: -3rem;
        background-repeat: no-repeat;
    }

    .ypts {
        width: 93%;
        background: rgba(250, 250, 250, 1);
        box-shadow: 0px -17px 9px -9px rgba(228, 228, 228, 0.65);
        text-align: center;
    }

    .ypts>p {
        color: #A5A5A5;
        font-weight: 600;
        /*font-size: 0.28rem;*/
        margin-bottom: .4rem;
        margin-top: 0.42rem;
    }

    .ypts>em {
        font-size: 0.28rem;
    }
    .yyp{
        top: 4.5rem;
        width: 45%;
        position: absolute;
        z-index: 8;
        right: 50px;
    }
    .yp_ok em{
        color: #A5A5A5 !important;
    }
    .zs_p{
        background: #FE5A3A !important;
        color:white  !important;
    }
    .ewm_mores{
        padding-bottom: 1.21rem;
    }
    .ewm_mores span {
        /*color: #343434 !important;*/
    }
    .ewm_user p em em{
        margin-top: 0.2rem;
    }
    .m_list .mbt{
        margin-top: 0 !important;
    }
    .ewm_moress {
        padding-bottom: 1.21rem;
    }
    .ewm_moress p span{
        color: #A5A5A5;
    }
    .line50{
        width: 95%;
        height: 0.5rem;
        box-shadow: 0px -17px 9px -9px rgba(228,228,228,0.65);
        margin: 0 auto;
    }
    .user_piao_num:after{
        border: none;
    }
    .ypwc{
        font-size: 0.3rem;
        color: white;
        width:6.16rem;
        height:.88rem;
        background:rgba(47,132,243,1);
        box-shadow: 0px 10px 15px -5px rgba(178,212,255,1) ;
        border-radius: 22px ;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .colora5{
        color: #A5A5A5 !important;
    }
    .user_piao_num{
        padding: 0rem .31rem;
    }

    .zs_title_piao{
        position: absolute;
        /* flex: 2; */
        text-align: center;
        width: 100%;
        left: 0;
    }
    .padding_top71{
        padding-top: .36rem !important;
        padding-bottom: 0 !important;
    }
    .van-cell__title{
        text-align: left;
    }
</style>
</head>
<body>
<div id="app">
    <van-nav-bar
            title="订单详情"
            left-text="返回"
            left-arrow
            @click-left="window.history.back();"
    ></van-nav-bar>

    <van-pull-refresh>

        <van-panel v-if="(info.pay_status == 20)&&(info.buy_mode != 'SHOPBUY')" style="margin-bottom: 15px;border-radius: 15px;overflow: hidden;">
            <template #header class="ewm">
                <div class="ewm_p">
                    <div class="title">
                        {{info.goods_title}}
                    </div>
                    <div class="ewm_nr" style="position: relative;padding-bottom: 0.36rem;">
                        <p v-cloak>核销码： <b class="code">{{info.ticket_code}}</b></p>
                        <div id="code" style="margin-bottom:0;"></div>
                        <img :src="info.ticket_qrcode" />
                    </div>
                    <div class="xian"></div>
                    <div class="ewm_user yp_ok" style="padding: 5px;text-align: center;color: #d2d2d2;">
                        使用方式:消费时出示此码
                    </div>
                </div>

            </template>
        </van-panel>

        <div class="list">
            <van-cell-group>
                <van-cell center  v-if="info.shop" is-link @click="jumpShop">
                    <template #title>
                        <div style="width: 20%;float: left;overflow: hidden;border-radius: 5px;">
                            <img :src="info.shop.img_thumb" style="width: 100%;vertical-align:middle;">
                        </div>
                    </template>
                    <template #default>
                        <h3 style="margin: 0;">{{info.shop.name}}</h3>
                    </template>
                </van-cell>
                <van-cell center  v-if="info.goods" is-link  @click="jumpGoodsDetail">
                    <template #title>
                        <div style="width: 20%;float: left;overflow: hidden;border-radius: 5px;">
                            <img v-if="info.pay_status == 20" :src="info.goods.img_thumb" style="width: 100%;vertical-align:middle;">
                        </div>
                    </template>
                    <template #default>
                        <h4 style="margin: 0;">{{info.goods_name}}</h4>
                    </template>
                </van-cell>
                <van-cell title="单价">
                    <template #default>
                        {{info.price}}元
                    </template>
                </van-cell>
                <van-cell title="购买数量">
                    <template #default>
                        {{info.num}}
                    </template>
                </van-cell>
                <van-cell title="总价">
                    <template #default>
                        {{info.total_price}}元
                    </template>
                </van-cell>
            </van-cell-group>

            <van-cell-group style="margin-top: 10px;" v-if="!info.shop">

                <van-cell>
                    <template #title>
                        <span style="color: #aaa;">联系人姓名:</span><span>{{info.buyer_name}}</span>
                    </template>
                    <template #default>
                        <span style="color: #ff8917">{{info.order_status_text}}</span>
                    </template>
                </van-cell>

                <van-cell>
                    <template #title>
                        <span style="color: #aaa;">联系方式:</span>
                    </template>
                    <template #default>
                        <a :href="'tel:'+info.buyer_tel">{{info.buyer_tel}}</a>
                    </template>
                </van-cell>

            </van-cell-group>

            <van-cell-group style="margin-top: 10px;" v-else>

                <van-cell>
                    <template #title>
                        <span style="color: #aaa;">订单状态:</span>
                    </template>
                    <template #default>
                        <span style="color: #ff8917">{{info.order_status_text}}</span>
                    </template>
                </van-cell>

            </van-cell-group>

            <van-cell-group style="margin-top: 10px;">

                <van-cell>
                    <template #title>
                        <span style="color: #aaa;">下单时间:</span>
                    </template>
                    <template #default>
                        <span>{{info.create_time}}</span>
                    </template>
                </van-cell>

                <van-cell v-if="info.pay_status == 20">
                    <template #title>
                        <span style="color: #aaa;">支付时间:</span>
                    </template>
                    <template #default>
                        <span>{{info.pay_time}}</span>
                    </template>
                </van-cell>

            </van-cell-group>
        </div>

    </van-pull-refresh>
</div>
<script>
    new Vue({
        el: "#app",
        data(){return {
            order_id:"{$Think.get.order_id}",
            info:[],
        }},
        created(){
            this.getOrderDetail()
        },
        methods:{
            getOrderDetail(){
                let that = this
                axios.post("{:url('order/getOrderDetail')}",{order_id:that.order_id}).then(function (ret) {
                    that.info = ret.data.data
                    console.log(that.info)
                })
            },
            jumpGoodsDetail(){
                window.location.href = "{:url('goods/detail')}?goods_id="+this.info.goods_id
            },
            jumpShop(){
                window.location.href = "{:url('godos/detail')}?shop_id="+this.info.shop.id
            }
        },
    })
</script>
</body>
</html>
